<!DOCTYPE html>
<head>
	<title>nav</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">


	<style type="text/css">

	</style>
</head>
<body>
	<div class="container">
		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<div class="navbar-header">
			      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
			        <span class="sr-only">Toggle navigation</span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			      </button>
			      <a class="navbar-brand" href="#"><img alt="Brand" src="img/police.png"></a>
			    </div>

				<ul class="nav navbar-nav">
			        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
			        <li><a href="#">Link</a></li>
			        <li class="dropdown">
			          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" >Dropdown 
			        		<span class="caret"></span>
			          </a>
			          <ul class="dropdown-menu">
			            <li><a href="#">Action</a></li>
			            <li><a href="#">Another action</a></li>
			            <li><a href="#">Something else here</a></li>
			            <li role="separator" class="divider"></li>
			            <li><a href="#">Separated link</a></li>
			            <li role="separator" class="divider"></li>
			            <li><a href="#">One more separated link</a></li>
			          </ul>
			        </li>
				</ul>
				<form class="navbar-form navbar-left">
			        <div class="form-group">
			          <input type="text" class="form-control" placeholder="Search">
			        </div>
			        <button type="submit" class="btn btn-default">Submit</button>
			    </form>
			    
			    <ul class="nav navbar-nav navbar-right">
			        <li><a href="#">Link</a></li>
			        <li class="dropdown">
			          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
			          <ul class="dropdown-menu">
			            <li><a href="#">Action</a></li>
			            <li><a href="#">Another action</a></li>
			            <li><a href="#">Something else here</a></li>
			            <li role="separator" class="divider"></li>
			            <li><a href="#">Separated link</a></li>
			          </ul>
			        </li>
			    </ul>
			</div>
		</nav>
	</div>
	<div class="jumbotron">
		<div class="container">
			<h1>Hello World</h1>
			<p>sadasda</p>
			<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
		</div>
	</div>
	<div class="container">
		<h3>Example heading <span class="label label-success">New</span></h3>
		<a href="#">Inbox <span class="badge">42</span></a>

		<button class="btn btn-success" type="button">
		  Messages <span class="badge">4</span>
		</button>
		<div class="alert alert-success" role="alert">...</div>
		<div class="alert alert-warning alert-dismissible" role="alert">
		  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		  <strong>Warning!</strong> Better check yourself, you're not looking too good.
		  <a href="#" class="alert-link">www.baidu</a>
		</div>
		<div class="progress">
		  <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;min-width: 2em;">
		    <span class="">0%</span>
		  </div>
		</div>
		<div class="col-md-8">
			<div class="progress">
			  <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;min-width: 2em;">
			    <span class="">0%</span>
			  </div>
			</div>
		</div>
			<button id="aa" class="btn-primary btn">开始</button>
			<button id="bb" disabled="disabled" class="btn-danger btn" >暂停</button>
			<button id="cc" disabled="disabled" class="btn-info btn" >清零</button>
<script type="text/javascript">
	$(function(){})
	var i = 0;
	var t = null;
	$("#aa").click(function(){
		t = setInterval(function(){
			i = i + 1;
			$(".progress-bar:eq(0)").css("width",i+"%");
			$(".progress-bar:eq(0) span").html(i+"%");
		},200)
		if(i>=100){
			clearInterval(t);
		}
		$('#aa').attr('disabled','disabled');
		$('#bb').removeAttr('disabled');
		$('#cc').removeAttr('disabled');
	})
	$("#bb").click(function(){
		clearInterval(t);
		$('#bb').attr('disabled','disabled');
		$('#aa').removeAttr('disabled');
	})
	$("#cc").click(function(){
		i = 0;
		clearInterval(t);
		$(".progress-bar").css("width","0%");
		$(".progress-bar span").html("0%");
		$('#aa').removeAttr('disabled');
		$('#bb').attr('disabled','disabled');
		$('#cc').attr('disabled','disabled');
	})
	/*function add(){
		var progress = setInterval (function (){
			i = i +1;
			$(".progress-bar").css("width",i+"%");
			$(".progress-bar span").html(i+"%");
		},100)
		$("#bb").click(function(){
			clearInterval(progress)
		})
	}
	$("#cc").click(function(){
			$(".progress-bar").css("width","0%");
			$(".progress-bar span").html("0%");
			$(".progress-bar").addClass("disabled");
	})*/
</script>
		<div class="list-group">
		  <a href="javascript:;" class="list-group-item list-group-item-info">Cras justo odio<span class="badge">14</span></a>
		  <a href="javascript:;" class="list-group-item">Dapibus ac facilisis in
  		  <span class="badge">5</span></a>
		  <a href="javascript:;" class="list-group-item">Morbi leo risus</a>
		  <a href="javascript:;" class="list-group-item">Porta ac consectetur ac</a>
		  <a href="javascript:;" class="list-group-item">Vestibulum at eros</a>
		</div>
		<div class="list-group">
		  <button type="button" class="list-group-item active">Cras justo odio</button>
		  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
		  <button type="button" class="list-group-item">Morbi leo risus</button>
		  <button type="button" class="list-group-item disabled">Porta ac consectetur ac</button>
		  <button type="button" class="list-group-item">Vestibulum at eros</button>
		</div>
		<div class="panel panel-default">
		  <div class="panel-body">
		    Basic panel example
		  </div>
		</div>
		<div class="panel panel-default">
		  <!-- Default panel contents -->
		  <div class="panel-heading">Panel heading</div>
		  <div class="panel-body">
		    <p>...</p>
		  </div>
		  <!-- Table -->
		  <table class="table">
		    ...
		  </table>
		</div>
		<!-- 16:9 aspect ratio -->
		<div class="col-xs-8 col-md-8 col-md-offset-2">
			<div class="embed-responsive embed-responsive-16by9">
			  <iframe class="embed-responsive-item" src="bootstrap.html"></iframe>
			</div>
		</div>
	</div>
</body>
</html>